<template>
    <div class="receive_pay_form_container">
        <el-form ref="receivePayForm" :rules="rules" :model="formData" label-width="6em"
                 v-enterToNext>
            <el-form-item :label="type === 'sale' ? '销售单号' : '采购单号'">
                <el-input v-model="formData.order_code" readonly />
            </el-form-item>
            <el-form-item :label="type === 'sale' ? '客户' : '供应商'">
                <el-input v-model="formData.name" readonly />
            </el-form-item>
            <el-form-item :label="type === 'sale' ? '应收金额' : '应付金额'">
                <el-input v-model="formData.total_amount" readonly />
            </el-form-item>
            <el-form-item :label="type === 'sale' ? '未收金额' : '未付金额'" prop="remain_amount">
                <el-input v-model="formData.remain_amount" readonly />
            </el-form-item>
            <el-form-item :label="type === 'sale' ? '收款金额' : '付款金额'" prop="amount">
                <el-input v-model="formData.amount" :placeholder="`请输入${ type === 'sale' ? '收' : '付' }款金额，可正可负`"
                          autocomplete="off" clearable />
            </el-form-item>
            <el-form-item :label="type === 'sale' ? '收款日期' : '付款日期'" prop="the_date">
                <el-date-picker v-model="formData.the_date" type="date"
                                value-format="yyyy-MM-dd" :clearable="false"
                                :editable="false" style="width: 100%;" />
            </el-form-item>
            <el-form-item label="支付方式" prop="pay_type" v-if="false">
                <el-input v-model="formData.pay_type" placeholder="请输入支付方式"
                          autocomplete="off" clearable />
            </el-form-item>
            <el-form-item label="资金账号" prop="fund_account_sid">
                <el-select v-model="formData.fund_account_sid" placeholder="请选择资金账号" style="width: 100%;"
                           clearable @change="handleChangeAccount">
                    <el-option v-for="(item, index) in (baseFundAccountList || [])"
                               :key="index" :label="item.name" :value="item.sid" />
                </el-select>
            </el-form-item>
            <el-form-item label="备注" prop="note_info">
                <el-input type="textarea" v-model="formData.note_info" placeholder="请输入备注"
                          maxlength="500" show-word-limit rows="3" clearable />
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "ReceivePayForm",
    props: {
        type: {
            type: String,
            default: 'buy',
        },
        row: {
            type: Object,
            default: null,
        },
    },
    data() {
        const _this = this;
        return {
            rules: {
                amount: [
                    { required: true, message: `请输入${ _this.type === 'sale' ? '收' : '付' }款金额`, trigger: "change" },
                ],
                the_date: [
                    { required: true, message: `请选择${ _this.type === 'sale' ? '收' : '付' }款日期`, trigger: "change" },
                ],
                fund_account_sid: [
                    { required: true, message: '请选择资金账号', trigger: "change" },
                ],
            },
            formData: {},
            baseFundAccountList: [],
        };
    },
    watch: {
        row: {
            handler() {
                this.init();
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        async init() {
            const _this = this;
            if (!_this.row) {
                return;
            }
            await _this.getBaseFundAccountList();
            if (_this.$refs.receivePayForm) {
                _this.$refs.receivePayForm.clearValidate();
            }
            _this.formData = $.extend({}, _this.row);
            if (_this.$utils.isEmpty(_this.formData.the_date)) {
                _this.formData = $.extend({}, _this.formData, {
                    the_date: _this.$utils.formatDate(new Date(), 'yyyy-MM-dd'),
                });
            }
        },
        async getBaseFundAccountList() {
            const _this = this;
            let subData = {nopage: 0};
            await _this.fetchData(_this.$api.API_FindBaseFundAccounts, subData).then((result) => {
                _this.baseFundAccountList = result.data || [];
            }).catch((error) => {
                _this.$message.error(error.message);
            });
        },
        handleChangeAccount(val) {
            const _this = this;
            if (_this.$utils.isNotEmpty(val)) {
                let filter = _this.baseFundAccountList.filter(item => item.sid === val);
                if (_this.$utils.isNotEmptyList(filter)) {
                    _this.formData = $.extend({}, _this.formData, {
                        fund_account_sid: val,
                        pay_type: filter[0].name,
                    });
                }
                return;
            }
            delete _this.formData.pay_type;
        },
        async confirm() {
            const _this = this;
            let valid = await _this.validateForm('receivePayForm');
            if (!valid) {
                return false;
            }
            return _this.fetchData(_this.$api.API_SaveJxcOrderAmountDetail4Batch, {
                type: _this.type,
                order_list: [_this.formData.order_sid],
                the_date: _this.formData.the_date,
                amount: _this.formData.amount,
                pay_type: _this.formData.pay_type,
                fund_account_sid: _this.formData.fund_account_sid,
                note_info: _this.formData.note_info,
            }).then(() => {
                _this.$message.success('保存成功！');
                return true;
            }).catch(() => {
                return false;
            });
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.receive_pay_form_container {
    width: 100%;
    height: 100%;
}
</style>
